
<!doctype html> 
 
 
<html class="no-js"> 
 
<head> 
	<title>head.js</title> 
	
	<script> 
		// calculate difference between zero and window.onload
		var now = new Date();
		window.onload = function() {
			document.getElementById("content").style.display = "block";	
			document.getElementById("ms").innerHTML = (new Date()).getTime() - now.getTime(); 	
		}
	</script> 
	
	
<script src="head.min.js"></script> 
 
<script> 
head.js("https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js")
	 .js("https://github.com/jquery/jquery-ui/raw/master/jquery-1.4.4.js")
	 .js("https://github.com/smith/scripty2/raw/master/lib/prototype.js")
	 .js("https://github.com/headjs/www/raw/master/content/test/jquery-ui.js")
	 .js("https://github.com/kosmas58/compass-jquery-plugin/raw/master/lib/jslint.js");
</script> 
 
 
	<!-- inline style so that we can focus on script loading only --> 
	<style> 
	html { background-color:#f9f9f9;	 }
	body { color:#333; font:13px sans-serif; } 
	#wrap { margin:50px auto;  width:800px;		 }
	#nav { padding-left:30px;		 }
	#nav a { float:left;	 margin-right:30px; color:#666; text-decoration:none; font-weight:bold; }
	#nav em { display:block; font-style:normal; font-weight:normal; color:#999; }
	#content { margin-top:10px; background-color:#fff;	 padding:30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -moz-box-shadow: 0 0 5px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2); }
	h1 { color:#777; font-size:40px; margin:0; margin-bottom:-10px; }
	h1 em { font-weight:normal; font-style:normal; color:#999; }
	#time { font-size:150px; color:#888; }
	#ms { font-weight:bold; color:#222; margin-right:-25px; }
	#content p { font-size:18px; margin:5px 0; color:#777; }
	#content strong { color:#222; }
	#footer { margin:5px 15px;	 }
	#footer a { text-decoration:none; color:#666; font-size:11px; }
	</style> 
	
</head>	
 
<body> 
 
	<div id="wrap"> 
		
		<div id="nav" class="clear"> 
			<a href="script.html">SCRIPT SRC <em>in head</em></a> 
			<a href="script-bottom.html">SCRIPT SRC <em>on bottom</em></a> 
			<a href="headjs.html">head.js <em>on head</em></a> 
			<br clear="all" /> 
		</div> 
		
		<div id="content" style="display:none"> 
		
			<h1>head.js</h1> 
			
			<div id="time"><span id="ms"></span> ms</div> 
			
			<p> 
				Press <strong>CTRL+SHIFT+R</strong> to reload with an empty cache = first impression.
			</p> 
			
			<p> 
				<strong>View source</strong> to see how scripts are provided.
			</p> 
			
			<p> 
				Time is calculated when <code>window.onload</code> fires.
			</p> 
			
			<p> 
				Try with different browsers. The time difference varies a lot.
			</p> 
			
			<p class="details"> 
				
head.js() calls are always separate from the page rendering. Does not matter whether you load on HEAD or on bottom. You can also load programmatically on demand.
 
			</p> 
			
		</div> 
		
		<div id="footer"> 
			<a href="../#theory">&laquo; headjs.com</a> 
			
			&nbsp; | &nbsp; <a href="https://github.com/headjs/headjs/issues">found a bug?</a> 
		</div> 
		
	</div> 
	
	
	
</body> 
	
	